// components/TabSwitcher.tsx
import React from 'react';

interface TabSwitcherProps {
    activeTab: 'images' | 'videos' | 'music';
    setActiveTab: (tab: 'images' | 'videos' | 'music') => void;
}

const TabSwitcher: React.FC<TabSwitcherProps> = ({ activeTab, setActiveTab }) => (
    <div style={{marginTop:'3%',marginLeft:'3%'}}>
        <button
            style={{
                width: '60px',
                height: '30px',
                borderRadius: '20px',
                border: '0',
                marginLeft: '2%',
                backgroundColor: activeTab === 'images' ? '#2f79f0' : '#dce4f1',
                color: activeTab === 'images' ? '#fff' : '#000',
            }}
            onClick={() => setActiveTab('images')}
            disabled={activeTab === 'images'}
        >
            图片
        </button>
        <button
            style={{
                width: '60px',
                height: '30px',
                borderRadius: '20px',
                border: '0',
                marginLeft: '2%',
                backgroundColor: activeTab === 'videos' ? '#2f79f0' : '#dce4f1',
                color: activeTab === 'videos' ? '#fff' : '#000',
            }}
            onClick={() => setActiveTab('videos')}
            disabled={activeTab === 'videos'}
        >
            视频
        </button>
        <button
            style={{
                width: '60px',
                height: '30px',
                borderRadius: '20px',
                border: '0',
                marginLeft: '2%',
                backgroundColor: activeTab === 'music' ? '#2f79f0' : '#dce4f1',
                color: activeTab === 'music' ? '#fff' : '#000',
            }}
            onClick={() => setActiveTab('music')}
            disabled={activeTab === 'music'}
        >
            音乐
        </button>
    </div>
);

export default TabSwitcher;